/**
 * Copyright 2013 Google, Inc. All Rights Reserved.
 *
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

/**
 * QueryPanel DOM.
 *
 * @author benvanik@google.com (Ben Vanik)
 */

{namespace wtf.app.query.querypanel}


/**
 * Root control UI.
 */
{template .control}
  <div class="{css appUiTabPanel} {css appUiQueryPanel}">
    <div class="{css header}">
      <div class="{css headerLeft}">
        <select class="{css zoneSelect}">
        </select>
        <div class="{css searchBox}">
        </div>
      </div>
      <div class="{css headerRight}">
        <div class="{css kButtonBar}">
          <a class="{css kButton} {css saveCsvResults}" title="Save query results as CSV.">Save CSV</a>
        </div>
        <div class="{css resultInfo}"></div>
      </div>
    </div>
    <div class="{css resultsOuter}">
      <div class="{css results}">
      </div>
    </div>
    <div class="{css empty}">
      <div class="{css error}"></div>
      <div class="{css help}">
        Start typing to get a case-insensitive substring search.<br/>
        <table class="{css examples}">
          <tr>
            <td width="400" class="{css code}">#gc</td>
            <td>find all GCs</td>
          </tr>
          <tr>
            <td class="{css code}">webgl</td>
            <td>WebGL related things</td>
          </tr>
        </table>
        <br/>
        Or, enter a regex:<br/>
        <table class="{css examples}">
          <tr>
            <td width="400" class="{css code}">/^webgl/i</td>
            <td>all WebGL* events</td>
          </tr>
        </table>
        <br/>
        To filter things down even more, use argument queries:<br/>
        <table class="{css examples}">
          <tr>
            <td width="400" class="{css code}">#gc(@duration>5ms)</td>
            <td>all GCs that took longer than 5ms</td>
          </tr>
          <tr>
            <td class="{css code}">/my*[sS]tuff/g(handle==2003, @ownduration>1ms)</td>
            <td>slow events of certain types with their handle arg equal to 2003</td>
          </tr>
        </table>
        <br/>
        Built-in event query variables:
        <table class="{css examples}">
          <tr>
            <td class="{css code}">@duration</td>
            <td>total time spent in the scope (in milliseconds)</td>
          </tr>
          <tr>
            <td class="{css code}">@userduration</td>
            <td>user time spent in the scope (in milliseconds)</td>
          </tr>
          <tr>
            <td class="{css code}">@ownduration</td>
            <td>time spent in the scope, excluding descendants (in milliseconds)</td>
          </tr>
        </table>
        <br/>
        <br/>
        TODO: more help (link to docs, etc)<br/>
      </div>
    </div>
  </div>
{/template}
